
var currentElement;
var myCodeMirror;


function setup(){
	
	initialiseFormDesigner();
	
	//Make the field palette able to drag onto form
	$("#palette li").draggable({
		helper:"clone",
		connectToSortable:"#form_designer ul"
	});
	
	//Setup properties tabs
	$( "#toolbox" ).tabs();
	
	
	//Setup the palette accordian
	$("#palette").accordion({
		heightStyle: "content"
	});
	
	
	
	
	//Setup CodeMirror before the tabs
	myCodeMirror = CodeMirror($("#view_html")[0], {
		  value: $("#formContainer").html(),
		  mode:  "text/html",
		  lineNumbers: true,
		  smartIndent : false,
		  indentUnit: 1
	
		});

	
	
	//Add the update button for the CodeMirror view
	$("#updateHTML").click(function(){
		$("#form_designer").html(myCodeMirror.getValue());
		//Re-attach event handlers
		initialiseFormDesigner();
	})
	
	//Pickup the latest form design
	$("#refreshHTML").click(function(){
		myCodeMirror.setValue($("#formContainer").html());
	})
	
	//Setup the form viewer tabs
	$( "#form_window" ).tabs({show:true});
	
	
	
}


function initialiseFormDesigner(){
	$("#form_designer li").each(function(){
		$(this).click(function(event){
			select(this);
			
		})
	});
	$("#form_designer ul").sortable({
		forcePlaceholderSize: true,
		helper: "clone",
		receive: function( event, ui ) {
			var x = $(this).data().uiSortable.currentItem;
			var p = x.find(".fieldContent");
			x.empty().append(p.children());
			x.css("display","").removeClass();
			//Assign a random id
			x.attr("id","f" + Math.floor(Math.random()*100000)); 
			x.click(function(){
				select(this);
			});
			
		}
	});
	$( "#form_designer ul" ).disableSelection();
	
	//Setup Delete form element button
	$("#form_element_controls #delete").click(function(){
		if ((currentElement.id != "form_header") && (currentElement.id != "form_footer")){
			$(currentElement).fadeOut('slow', function(){
				//Get the controls so we dont loose them !
				$("#form_designer").append($("#form_element_controls").detach());
				$("#form_element_controls").addClass("hide");
				$(currentElement).remove();
			});
		}  
	})

	//Load Form properties
	var frm = $("#form_designer");
	$("#formPropertyID").val(frm.attr('id'));
	$("#formPropertyName").val(frm.attr('name'));
	$("#formPropertyAction").val(frm.attr('action'));
	$("#formPropertyMethod").val(frm.attr('method'));
	$("#formPropertyClass").val(frm.attr('class'));
}



function unSelectAll(){
	currentElement = null;
	$("#form_designer li").each(function(){
		$(this).removeClass("current")

	});
}

function select(element){
	unSelectAll();
	currentElement = element;
	$(element).addClass("current");
	if ((currentElement.id != "form_header") && (currentElement.id != "form_footer")) {
		var controls = $("#form_element_controls").detach();
		$(element).append(controls);
		controls.removeClass("hide");
	} else $("#form_element_controls").addClass("hide");
	//Populate the Properties section
	var label = $(element).children().first();
	$("#fieldPropertyID").val(element.id);
	$("#fieldPropertyClass").val($(element).attr('class'));
	$("#fieldPropertyLabel").val(label.html());
	
	//Retrieve from first field...
	var firstField = $(currentElement).find(":input").first();
	$("#fieldPropertyName").val(firstField.attr('name'));
	$("#fieldPropertyOnChange").val(firstField.attr('onChange'));
	$("#fieldPropertyOnClick").val(firstField.attr('onClick'));
}

function updateFieldProperties(){
	var label = $(currentElement).children().first();
	var content = $(currentElement).children()[2];
	currentElement.id = $("#fieldPropertyID").val();
	label.html($("#fieldPropertyLabel").val());
	$(currentElement).attr('class',$("#fieldPropertyClass").val());

	var firstField = $(currentElement).find(":input").first();
	//Apply to first field
	firstField.attr('name',$("#fieldPropertyName").val());
	firstField.attr('onChange',$("#fieldPropertyOnChange").val());
	firstField.attr('onClick',$("#fieldPropertyOnClick").val());
}


function updateFormProperties(){
	var frm = $("#form_designer");
	frm.attr('name',$("#formPropertyName").val());
	frm.attr('action', $("#formPropertyAction").val());
	frm.attr('method', $("#formPropertyMethod").val());
	frm.attr('class',$("#formPropertyClass").val());
}


/**
 * Lazy initialization of color picker
 * @param element
 */
function colorPickerClick(x) {
	if (x.iris == undefined) {
		$(x).iris({
			 change: function(event, ui) {
			        // event = standard jQuery event, produced by whichever control was changed.
			        // ui = standard jQuery UI object, with a color member containing a Color.js object

			        // change the headline color
			        $(this).prev().css( 'background-color', ui.color.toString());
			    }
		});
		$(x).iris('show');
		$(x).click(function(){
			$(this).iris('toggle');
		})
	} 
}


function doDebug(){
	$("#myDebug").text(x.toSource());
}




